<template>
  <ga-modal v-model:visible="visible" :width="560" @close="handleCancel(formRef)">
    <template #title>磁盘扩容</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form ref="formRef" :model="formData">
        <alert />
        <BorderBox
          :headerStyle="{ background: '#F4F7FB' }"
          :wrapperStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in 2"
          :key="index"
        >
          <template #title_l>
            <SvgIcon name="bronze_medal" size="20px" />10.180.111.130 - 0109
          </template>
          <template #main_info>
            <ga-form-item hide-label style="margin-bottom: 0">
              <ga-form-item
                field="name"
                label="容量"
                style="margin-bottom: 0"
                label-col-flex="40px"
                :rules="[RULE.NOT_NULL]"
              >
                <ga-input-number
                  :style="{ width: '160px' }"
                  allow-clear
                  hide-button
                  :min="0"
                >
                  <template #append>GB</template>
                </ga-input-number>
              </ga-form-item>
              <ga-form-item
                style="margin-bottom: 0"
                field="name"
                label="磁盘类型"
                label-col-flex="70px"
                :rules="[RULE.NOT_NULL]"
                :validate-trigger="['change', 'input']"
              >
                <p class="text_p">{{ "系统盘(普通磁盘)" }}</p>
              </ga-form-item>
            </ga-form-item>
          </template>
        </BorderBox>
      </ga-form>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button>
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, h, reactive } from "vue";
import { diskExpansion } from "@/api/vm";
import { RULE } from "@/constant/validators";
import useLoading from "@/hooks/loading";
import alert from "../common/alert.vue";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const okLoading = ref(false);
const formData = reactive({
  name: "",
  description: "",
});
const visible = ref(false);
const curId = ref("");
const open = async (record) => {
  visible.value = true;
  if (record && record?.id) {
    setLoading(true);
    curId.value = record.id;
    Object.keys(formData).forEach((item) => {
      formData[item] = record[item];
    });
    setLoading(false);
  }
};
// 获取计算方案列表
// const tableData = ref([]);
// const fetchData = async () => {
//   setLoading(true);
//   try {
//     const { data } = await getComputingSolutionList(listQuery);
//     tableData.value = data.items?.map((item) => ({
//       ...item,
//       disabled:
//         item.vcpu === current.value?.cpuCores &&
//         item.memory === current.value?.memory / 1024,
//     }));
//   } finally {
//     setLoading(false);
//   }
// };
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    okLoading.value = true;
    // try {
    //   const obj = formatVpcCreateParams(type, formData, tableData.value);
    //   const { code } = await diskExpansion(obj, "network-vpc");
    //   if (code === 20000) Message.success("操作成功");
    //   emits("fetchData");
    //   visible.value = false;
    // } finally {
    //   okLoading.value = true;
    // }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped></style>
